<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火电机组冷端优化系统 - 对话式分析</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-bg: #0f172a;
            --secondary-bg: #1e293b;
            --card-bg: #1a2435;
            --accent: #5eead4;
            --accent-hover: #88f3e2;
            --text-primary: #e2e8f0;
            --text-secondary: #94a3b8;
            --text-tertiary: #64748b;
            --border-color: #334155;
            --success: #4ade80;
            --warning: #fbbf24;
            --error: #f87171;
            --font-main: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
            --spacing-sm: 8px;
            --spacing-md: 16px;
            --spacing-lg: 24px;
            --spacing-xl: 32px;
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 12px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: var(--primary-bg);
            color: var(--text-primary);
            font-family: var(--font-main);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        /* 导航栏 */
        .navbar {
            background: var(--secondary-bg);
            border-bottom: 1px solid var(--border-color);
            padding: var(--spacing-md) var(--spacing-xl);
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 100;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
        }
        
        .logo-icon {
            width: 40px;
            height: 40px;
            background: var(--accent);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-bg);
            font-size: 1.2rem;
        }
        
        .logo-text {
            font-size: 1.4rem;
            font-weight: 600;
            background: linear-gradient(to right, var(--text-primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .nav-links {
            display: flex;
            gap: var(--spacing-xl);
        }
        
        .nav-link {
            color: var(--text-secondary);
            text-decoration: none;
            font-weight: 500;
            padding: var(--spacing-sm) var(--spacing-md);
            border-radius: var(--radius-sm);
            transition: all 0.3s;
        }
        
        .nav-link:hover, .nav-link.active {
            color: var(--accent);
            background: rgba(94, 234, 212, 0.1);
        }
        
        .user-profile {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(45deg, var(--accent), #4a7bff);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.9rem;
        }
        
        /* 内容区域 */
        .content-container {
            flex: 1;
            display: flex;
            overflow: hidden;
        }
        
        /* 对话历史侧边栏 */
        .history-sidebar {
            width: 280px;
            background: var(--secondary-bg);
            border-right: 1px solid var(--border-color);
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .history-header {
            padding: var(--spacing-lg);
            border-bottom: 1px solid var(--border-color);
        }
        
        .history-title {
            font-size: 1.2rem;
            color: var(--accent);
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }
        
        .history-list {
            flex: 1;
            overflow-y: auto;
            padding: var(--spacing-md);
        }
        
        .history-item {
            padding: var(--spacing-md);
            border-radius: var(--radius-sm);
            margin-bottom: var(--spacing-sm);
            background: rgba(26, 36, 53, 0.5);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .history-item:hover {
            background: rgba(94, 234, 212, 0.1);
        }
        
        .history-item.active {
            background: rgba(94, 234, 212, 0.2);
            border-left: 3px solid var(--accent);
        }
        
        .history-item-title {
            font-weight: 500;
            margin-bottom: var(--spacing-sm);
        }
        
        .history-item-date {
            font-size: 0.8rem;
            color: var(--text-tertiary);
        }
        
        .history-actions {
            padding: var(--spacing-md);
            border-top: 1px solid var(--border-color);
            display: flex;
            gap: var(--spacing-sm);
        }
        
        .history-btn {
            flex: 1;
            padding: var(--spacing-sm);
            background: rgba(94, 234, 212, 0.1);
            border: 1px solid rgba(94, 234, 212, 0.3);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .history-btn:hover {
            background: rgba(94, 234, 212, 0.2);
        }
        
        /* 主聊天区域 */
        .chat-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .chat-header {
            padding: var(--spacing-lg);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .chat-title {
            font-size: 1.4rem;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
        }
        
        .chat-actions {
            display: flex;
            gap: var(--spacing-sm);
        }
        
        .chat-action {
            padding: var(--spacing-sm) var(--spacing-md);
            background: rgba(94, 234, 212, 0.1);
            border: 1px solid rgba(94, 234, 212, 0.3);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }
        
        .chat-action:hover {
            background: rgba(94, 234, 212, 0.2);
        }
        
        .chat-messages {
            flex: 1;
            padding: var(--spacing-lg);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-lg);
        }
        
        .message {
            max-width: 80%;
            padding: var(--spacing-md);
            border-radius: var(--radius-md);
            position: relative;
        }
        
        .message-user {
            background: rgba(30, 41, 59, 0.7);
            border: 1px solid var(--border-color);
            align-self: flex-end;
        }
        
        .message-ai {
            background: rgba(26, 36, 53, 0.7);
            border: 1px solid rgba(94, 234, 212, 0.3);
            align-self: flex-start;
        }
        
        .message-header {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            margin-bottom: var(--spacing-sm);
        }
        
        .message-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .ai-avatar {
            background: linear-gradient(45deg, var(--accent), #4a7bff);
            color: white;
        }
        
        .user-avatar-sm {
            background: var(--secondary-bg);
            color: var(--text-primary);
        }
        
        .message-name {
            font-weight: 500;
        }
        
        .message-time {
            font-size: 0.8rem;
            color: var(--text-tertiary);
            margin-left: auto;
        }
        
        .message-content {
            line-height: 1.6;
        }
        
        .message-actions {
            display: flex;
            gap: var(--spacing-sm);
            margin-top: var(--spacing-sm);
        }
        
        .message-action {
            font-size: 0.9rem;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .message-action:hover {
            color: var(--accent);
        }
        
        .chat-input-area {
            padding: var(--spacing-lg);
            border-top: 1px solid var(--border-color);
        }
        
        .chat-input-container {
            display: flex;
            gap: var(--spacing-md);
            align-items: flex-end;
        }
        
        .chat-input {
            flex: 1;
            padding: var(--spacing-md);
            background: rgba(26, 36, 53, 0.7);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            color: var(--text-primary);
            font-family: var(--font-main);
            resize: none;
            min-height: 100px;
            max-height: 200px;
            transition: all 0.3s;
        }
        
        .chat-input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.1);
        }
        
        .send-btn {
            padding: var(--spacing-md) var(--spacing-lg);
            background: rgba(94, 234, 212, 0.2);
            border: 1px solid rgba(94, 234, 212, 0.4);
            border-radius: var(--radius-md);
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .send-btn:hover {
            background: rgba(94, 234, 212, 0.3);
        }
        
        .input-actions {
            display: flex;
            gap: var(--spacing-sm);
            margin-top: var(--spacing-md);
        }
        
        .input-action {
            padding: var(--spacing-sm) var(--spacing-md);
            background: rgba(26, 36, 53, 0.5);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .input-action:hover {
            background: rgba(94, 234, 212, 0.1);
            color: var(--accent);
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .history-sidebar {
                width: 220px;
            }
        }
        
        @media (max-width: 768px) {
            .history-sidebar {
                position: absolute;
                left: -280px;
                z-index: 200;
                transition: transform 0.3s ease;
            }
            
            .history-sidebar.active {
                transform: translateX(280px);
            }
            
            .toggle-history {
                display: block;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="logo">
            <div class="logo-icon">
                <i class="fas fa-bolt"></i>
            </div>
            <div class="logo-text">冷端优化系统</div>
        </div>
        
        <div class="nav-links">
            <a href="#" class="nav-link">驾驶舱</a>
            <a href="#" class="nav-link">核心功能</a>
            <a href="#" class="nav-link active">对话分析</a>
            <a href="#" class="nav-link">报表</a>
        </div>
        
        <div class="user-profile">
            <div class="user-avatar">
                <span>U</span>
            </div>
        </div>
    </nav>
    
    <!-- 内容区域 -->
    <div class="content-container">
        <!-- 对话历史侧边栏 -->
        <div class="history-sidebar">
            <div class="history-header">
                <h2 class="history-title">
                    <i class="fas fa-history"></i> 对话历史
                </h2>
            </div>
            
            <div class="history-list">
                <div class="history-item active">
                    <div class="history-item-title">背压优化分析</div>
                    <div class="history-item-date">2023-10-15 14:30</div>
                </div>
                
                <div class="history-item">
                    <div class="history-item-title">风机频率调整建议</div>
                    <div class="history-item-date">2023-10-14 10:22</div>
                </div>
                
                <div class="history-item">
                    <div class="history-item-title">冬季防冻策略</div>
                    <div class="history-item-date">2023-10-12 16:45</div>
                </div>
                
                <div class="history-item">
                    <div class="history-item-title">冷却塔效率提升</div>
                    <div class="history-item-date">2023-10-10 09:15</div>
                </div>
                
                <div class="history-item">
                    <div class="history-item-title">真空系统泄漏检测</div>
                    <div class="history-item-date">2023-10-08 11:30</div>
                </div>
            </div>
            
            <div class="history-actions">
                <div class="history-btn">
                    <i class="fas fa-plus"></i> 新建对话
                </div>
                <div class="history-btn">
                    <i class="fas fa-trash"></i> 清空
                </div>
            </div>
        </div>
        
        <!-- 主聊天区域 -->
        <div class="chat-container">
            <div class="chat-header">
                <h2 class="chat-title">
                    <i class="fas fa-comments"></i> 背压优化分析
                </h2>
                
                <div class="chat-actions">
                    <div class="chat-action">
                        <i class="fas fa-file-export"></i> 导出报告
                    </div>
                    <div class="chat-action">
                        <i class="fas fa-print"></i> 打印
                    </div>
                </div>
            </div>
            
            <div class="chat-messages">
                <!-- AI消息 -->
                <div class="message message-ai">
                    <div class="message-header">
                        <div class="message-avatar ai-avatar">
                            <i class="fas fa-bolt"></i>
                        </div>
                        <div class="message-name">冷端优化AI助手</div>
                        <div class="message-time">14:30:22</div>
                    </div>
                    
                    <div class="message-content">
                        <p>您好！我是冷端优化AI助手，专注于火电机组冷端系统的优化分析。</p>
                        <p>我可以帮助您分析背压数据、优化运行参数、诊断系统问题并提供改进建议。</p>
                        <p>请问您今天想了解哪方面的优化问题？</p>
                    </div>
                    
                    <div class="message-actions">
                        <div class="message-action">
                            <i class="fas fa-copy"></i> 复制
                        </div>
                        <div class="message-action">
                            <i class="fas fa-share"></i> 分享
                        </div>
                    </div>
                </div>
                
                <!-- 用户消息 -->
                <div class="message message-user">
                    <div class="message-header">
                        <div class="message-name">张工</div>
                        <div class="message-time">14:32:45</div>
                        <div class="message-avatar user-avatar-sm">
                            <span>U</span>
                        </div>
                    </div>
                    
                    <div class="message-content">
                        <p>我们#3机组的背压最近有上升趋势，从12.5kPa上升到13.2kPa，环境温度变化不大。请分析可能的原因和优化建议。</p>
                    </div>
                    
                    <div class="message-actions">
                        <div class="message-action">
                            <i class="fas fa-copy"></i> 复制
                        </div>
                        <div class="message-action">
                            <i class="fas fa-edit"></i> 编辑
                        </div>
                    </div>
                </div>
                
                <!-- AI回复 -->
                <div class="message message-ai">
                    <div class="message-header">
                        <div class="message-avatar ai-avatar">
                            <i class="fas fa-bolt"></i>
                        </div>
                        <div class="message-name">冷端优化AI助手</div>
                        <div class="message-time">14:35:10</div>
                    </div>
                    
                    <div class="message-content">
                        <p>感谢您提供的信息。根据#3机组的运行数据，我进行了以下分析：</p>
                        
                        <h3>背压上升原因分析</h3>
                        <ul>
                            <li><strong>冷却水流量不足</strong>：当前流量为12,500 m³/h，低于设计值13,200 m³/h，建议检查循环水泵状态</li>
                            <li><strong>凝汽器清洁度下降</strong>：端差从3.2°C上升到5.8°C，表明钛管可能有结垢或堵塞</li>
                            <li><strong>真空系统泄漏</strong>：真空度下降了0.5kPa，建议进行泄漏检测</li>
                            <li><strong>风机运行效率</strong>：#4风机频率偏低，未根据环境温度调整</li>
                        </ul>
                        
                        <h3>优化建议</h3>
                        <ol>
                            <li>增加循环水流量至13,000 m³/h，观察背压变化</li>
                            <li>安排凝汽器清洗，预计可降低背压0.8-1.2kPa</li>
                            <li>进行真空系统严密性试验，修复泄漏点</li>
                            <li>调整#4风机频率从42Hz提高到45Hz</li>
                        </ol>
                        
                        <p>实施以上措施后，预计背压可降低至12.0kPa以下，机组效率提升约1.2%。</p>
                    </div>
                    
                    <div class="message-actions">
                        <div class="message-action">
                            <i class="fas fa-copy"></i> 复制
                        </div>
                        <div class="message-action">
                            <i class="fas fa-share"></i> 分享
                        </div>
                        <div class="message-action">
                            <i class="fas fa-chart-line"></i> 生成图表
                        </div>
                    </div>
                </div>
                
                <!-- 用户追问 -->
                <div class="message message-user">
                    <div class="message-header">
                        <div class="message-name">张工</div>
                        <div class="message-time">14:38:22</div>
                        <div class="message-avatar user-avatar-sm">
                            <span>U</span>
                        </div>
                    </div>
                    
                    <div class="message-content">
                        <p>如果清洗凝汽器，预计需要停机多长时间？对发电量影响如何？</p>
                    </div>
                </div>
                
                <!-- AI回复 -->
                <div class="message message-ai">
                    <div class="message-header">
                        <div class="message-avatar ai-avatar">
                            <i class="fas fa-bolt"></i>
                        </div>
                        <div class="message-name">冷端优化AI助手</div>
                        <div class="message-time">14:40:15</div>
                    </div>
                    
                    <div class="message-content">
                        <p>根据历史数据和同类机组经验：</p>
                        
                        <h3>凝汽器清洗方案</h3>
                        <table>
                            <tr>
                                <th>清洗类型</th>
                                <th>停机时间</th>
                                <th>背压降低</th>
                                <th>发电量损失</th>
                                <th>投资回收期</th>
                            </tr>
                            <tr>
                                <td>高压水冲洗</td>
                                <td>16-24小时</td>
                                <td>0.8-1.0kPa</td>
                                <td>约120MWh</td>
                                <td>15天</td>
                            </tr>
                            <tr>
                                <td>化学清洗</td>
                                <td>48-72小时</td>
                                <td>1.2-1.5kPa</td>
                                <td>约360MWh</td>
                                <td>30天</td>
                            </tr>
                        </table>
                        
                        <p><strong>建议：</strong>采用高压水冲洗方案，在低负荷时段进行，可最大限度减少发电损失。</p>
                        <p>清洗后预计全年可增加发电量约2,100MWh，经济效益显著。</p>
                    </div>
                </div>
            </div>
            
            <div class="chat-input-area">
                <div class="chat-input-container">
                    <textarea class="chat-input" placeholder="输入您的问题..."></textarea>
                    <button class="send-btn">
                        <i class="fas fa-paper-plane"></i> 发送
                    </button>
                </div>
                
                <div class="input-actions">
                    <div class="input-action">
                        <i class="fas fa-paperclip"></i> 附件
                    </div>
                    <div class="input-action">
                        <i class="fas fa-microphone"></i> 语音
                    </div>
                    <div class="input-action">
                        <i class="fas fa-magic"></i> 优化表达
                    </div>
                    <div class="input-action">
                        <i class="fas fa-robot"></i> 智能建议
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            const chatInput = document.querySelector('.chat-input');
            const sendBtn = document.querySelector('.send-btn');
            const chatMessages = document.querySelector('.chat-messages');
            
            // 发送消息函数
            function sendMessage() {
                const message = chatInput.value.trim();
                if (!message) return;
                
                // 添加用户消息
                addUserMessage(message);
                
                // 清空输入框
                chatInput.value = '';
                
                // 模拟AI回复
                setTimeout(() => {
                    addAIMessage("已收到您的查询，正在分析数据...");
                    
                    // 模拟AI思考后回复
                    setTimeout(() => {
                        addAIMessage(getAIResponse(message));
                    }, 2000);
                }, 500);
            }
            
            // 添加用户消息
            function addUserMessage(message) {
                const now = new Date();
                const timeStr = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
                
                const messageElement = document.createElement('div');
                messageElement.className = 'message message-user';
                messageElement.innerHTML = `
                    <div class="message-header">
                        <div class="message-name">张工</div>
                        <div class="message-time">${timeStr}</div>
                        <div class="message-avatar user-avatar-sm">
                            <span>U</span>
                        </div>
                    </div>
                    
                    <div class="message-content">
                        <p>${message}</p>
                    </div>
                    
                    <div class="message-actions">
                        <div class="message-action">
                            <i class="fas fa-copy"></i> 复制
                        </div>
                        <div class="message-action">
                            <i class="fas fa-edit"></i> 编辑
                        </div>
                    </div>
                `;
                
                chatMessages.appendChild(messageElement);
                chatMessages.scrollTop = chatMessages.scrollHeight;
            }
            
            // 添加AI消息
            function addAIMessage(message) {
                const now = new Date();
                const timeStr = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
                
                const messageElement = document.createElement('div');
                messageElement.className = 'message message-ai';
                messageElement.innerHTML = `
                    <div class="message-header">
                        <div class="message-avatar ai-avatar">
                            <i class="fas fa-bolt"></i>
                        </div>
                        <div class="message-name">冷端优化AI助手</div>
                        <div class="message-time">${timeStr}</div>
                    </div>
                    
                    <div class="message-content">
                        ${message}
                    </div>
                    
                    <div class="message-actions">
                        <div class="message-action">
                            <i class="fas fa-copy"></i> 复制
                        </div>
                        <div class="message-action">
                            <i class="fas fa-share"></i> 分享
                        </div>
                        <div class="message-action">
                            <i class="fas fa-chart-line"></i> 生成图表
                        </div>
                    </div>
                `;
                
                chatMessages.appendChild(messageElement);
                chatMessages.scrollTop = chatMessages.scrollHeight;
            }
            
            // 模拟AI回复
            function getAIResponse(message) {
                const lowerMessage = message.toLowerCase();
                
                if (lowerMessage.includes('背压') || lowerMessage.includes('压力')) {
                    return `
                        <h3>背压优化建议</h3>
                        <p>根据当前运行数据，背压偏高主要受以下因素影响：</p>
                        <ul>
                            <li>冷却水流量不足（当前12,500 m³/h，建议提升至13,200 m³/h）</li>
                            <li>凝汽器清洁度下降（端差5.8°C，高于标准值3.5°C）</li>
                            <li>环境温度升高（较上周上升3.2°C）</li>
                        </ul>
                        
                        <h3>优化措施</h3>
                        <ol>
                            <li>增加循环水泵出力，提升流量至13,000 m³/h</li>
                            <li>安排凝汽器高压水冲洗</li>
                            <li>调整风机运行频率，增加散热能力</li>
                        </ol>
                        
                        <p>实施后预计背压可降低0.8-1.2kPa，机组效率提升0.6-0.9%</p>
                    `;
                } else if (lowerMessage.includes('风机') || lowerMessage.includes('频率')) {
                    return `
                        <h3>风机运行优化</h3>
                        <p>当前风机运行情况分析：</p>
                        <ul>
                            <li>#1风机频率：42.5Hz（正常）</li>
                            <li>#2风机频率：40.2Hz（偏低）</li>
                            <li>#3风机频率：45.1Hz（正常）</li>
                            <li>#4风机频率：38.8Hz（偏低）</li>
                        </ul>
                        
                        <h3>优化建议</h3>
                        <p>根据当前环境温度（24.5°C）和负荷率（85%）：</p>
                        <ol>
                            <li>将#2风机频率提升至42.0Hz</li>
                            <li>将#4风机频率提升至43.5Hz</li>
                            <li>优化风机启停顺序，优先使用高效风机</li>
                        </ol>
                        
                        <p>预计调整后风机总功耗可降低5.2%，冷却效果提升3.8%</p>
                    `;
                } else if (lowerMessage.includes('清洗') || lowerMessage.includes('清洁')) {
                    return `
                        <h3>凝汽器清洗方案</h3>
                        <p>建议采用高压水冲洗方案：</p>
                        <ul>
                            <li><strong>停机时间</strong>：16-24小时</li>
                            <li><strong>预期效果</strong>：背压降低0.8-1.2kPa</li>
                            <li><strong>发电损失</strong>：约120MWh</li>
                            <li><strong>经济效益</strong>：投资回收期15天</li>
                        </ul>
                        
                        <h3>实施计划</h3>
                        <ol>
                            <li>选择低负荷时段（建议周末）</li>
                            <li>准备高压清洗设备（压力80-100MPa）</li>
                            <li>分段清洗，优先处理结垢严重区域</li>
                            <li>清洗后测试真空严密性</li>
                        </ol>
                    `;
                } else {
                    return `
                        <p>感谢您的查询！我是冷端优化AI助手，专注于火电机组冷端系统的优化分析。</p>
                        <p>我可以帮助您分析以下方面的问题：</p>
                        <ul>
                            <li>背压优化与诊断</li>
                            <li>风机运行调整</li>
                            <li>凝汽器清洁策略</li>
                            <li>冬季防冻措施</li>
                            <li>冷却塔效率提升</li>
                        </ul>
                        <p>请具体描述您的问题，我将为您提供专业分析建议。</p>
                    `;
                }
            }
            
            // 发送按钮事件
            sendBtn.addEventListener('click', sendMessage);
            
            // 回车键发送消息（Shift+Enter换行）
            chatInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    sendMessage();
                }
            });
            
            // 导出报告按钮
            document.querySelector('.chat-action').addEventListener('click', function() {
                alert('正在生成分析报告...');
                // 在实际项目中这里会有生成报告的逻辑
            });
            
            // 历史记录点击事件
            const historyItems = document.querySelectorAll('.history-item');
            historyItems.forEach(item => {
                item.addEventListener('click', function() {
                    historyItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 在实际项目中这里会加载对应的历史对话
                    alert('正在加载历史对话...');
                });
            });
        });
    </script>
</body>
</html>